<template>
  <el-container style="height: 100%;" v-loading="loading" element-loading-text="拼命加载中">
    <el-main>
      <div style="display: flex">
        <div style="flex: 1;margin-right: 10px;" v-for="(contrast, index) in contrastProductTable">
          <el-form ref="form" label-width="80px">
            <el-form-item label="比价单">
              {{contrast.orderCode}}
            </el-form-item>
            <el-form-item label="厂家">
              {{contrast.manufacturerName}}
            </el-form-item>
          </el-form>
          <h1>商品信息</h1>
          <el-table label="序号" :data="contrast.products" :row-class-name="tableRowClassName">
            <el-table-column type="index" width="55" align="center"/>
            <el-table-column label="产品编码" align="center" prop="productCode" :show-overflow-tooltip="true"/>
            <el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
            <el-table-column label="计数单位" align="center" prop="unitName" />
            <el-table-column label="商品数量" align="center" prop="productNum" />
            <el-table-column label="商品单价" align="center" prop="onlyPrice" />
            <el-table-column label="商品总价" align="center" prop="allPrice" />
          </el-table>
        </div>
      </div>
    </el-main>
    <el-footer style="padding-top: 15px;height: calc(50% - 15px)">
      <el-form size="small" :inline="true" label-width="80px">
        <el-form-item label="有效期">
          {{valid}}
        </el-form-item>
      </el-form>
      <h1>选择的商品信息</h1>
      <el-table :data="selectedProductList">
        <el-table-column type="index" width="55" label="序号" align="center" />
        <el-table-column label="产品编码" align="center" prop="productCode" :show-overflow-tooltip="true"/>
        <el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
        <el-table-column label="计数单位" align="center" prop="unitName" />
        <el-table-column label="商品数量" align="center" prop="productNum" />
        <el-table-column label="商品单价" align="center" prop="onlyPrice"/>
        <el-table-column label="商品总价" align="center" prop="allPrice" />
      </el-table>
    </el-footer>
  </el-container>
</template>

<script>
import { getPriceComparisonAuditInfo } from "@/api/wms/auditOrder";

export default {
  name: "ComparisonProduct",
  props: {
    auditId: {
      type: Number,
      default: null
    },
    openFlag: {
      type: Boolean
    }
  },
  data() {
    return {
      loading: false,
      contrastProductTable: [],
      selectedProductList: [],
      // 利润比例
      ratio: 0,
      valid: null
    }
  },
  created() {
    this.selectedProductList = []
    this.getAuditInfo()
  },
  methods: {
    getAuditInfo() {
      this.loading = true
      getPriceComparisonAuditInfo({id: this.auditId}).then(res => {
        if (res.code === 200) {
          let data = res.data
          this.contrastProductTable = data.priceComparisonOrders
          this.selectedProductList = data.products
          this.valid = data.valid
          this.ratio = data.ratio
        }
      }).finally(e => {
        this.loading = false
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.isSelected) {
        return 'success-row';
      }
      return '';
    }
  },
  watch:{
    openFlag: {
      handler(nval, oldval){
        if (nval){
          this.selectedProductList = []
          this.getAuditInfo()
        }
      }
    }
  }
}
</script>

<style scoped>
/deep/ .el-table .success-row {
  background: #f0f9eb;
}
</style>
